<template>
  <view>
    <!-- 图片 -->
    <view>
      <image class="goodimg" :src="good.img"></image>
    </view>
    <view class="goodname">{{good.name}}</view>
    <view class="jfandbtn">
      <view class="jf">{{good.price}}积分</view>
      <view class="btndh" @click="duihuan(good)">兑换</view>
    </view>
    <view>
      <u-modal :show="show" :title="title" showCancelButton="true" :content="'您确定要兑换 <'+ good.name +'> 吗？'" :closeOnClickOverlay="true" @confirm="confirm" @cancel="cancel" @close="close1"></u-modal>
      <u-modal :show="shownotice" :title=" '<'+ good.name + '>兑换成功'"  :showConfirmButton="false" :content='noticetext' :closeOnClickOverlay="true"  @close="close2"></u-modal>
    </view>
  </view>
</template>

<script>
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    name: "my-good-item",
    props: {
      // 公告的信息对象
      good: {
        type: Object,
        default: {},
      },
      // 业主的信息对象
      userInfo: {
        type: Object,
        default: {},
      },

    },
    data() {
      return {
        show: false,
        title: '兑换提示',
        shownotice:false,
        noticetitle:'兑换成功',
        noticetext:'请于周一至周五8:00-18:00 到物业办公室领取',
      };
    },
    methods:{
      // 将user.js  页面中的    updateUserInfo 方法映射到 本页面，
      // 用于修改内存中存储的 userInfo 用户信息
      ...mapMutations('m_user', ['updateUserInfo']),
      duihuan(good){
        console.log(good.id);
        this.show=true;
      },
      async confirm(){
        console.log("积分减少，添加记录")
        if(this.userInfo.sumValue-this.good.price<0) return uni.$showMsg("积分不足，快去进行垃圾分类打卡吧~")
        var integral={};
        integral.uid=this.userInfo.id;
        integral.gid=this.good.id;
        integral.time=uni.$getDateTime(new Date());
        const {data: res} = await uni.$http.put('/integral/addIntegralDetail',integral)
        // 请求失败  弹框提醒
        if (res.status !== 200) return uni.$showMsg()
        if(res.data.length!==2 || res.data[0].isok===false) return uni.$showMsg("网络异常，兑换失败");
        this.updateUserInfo(res.data[1].userInfo);
        this.show=false;
        // 弹出取货提示框
        this.shownotice=true;
      },
      cancel(){
        this.show=false;
      },
      close1(){
        this.show=false;
      },
      close2(){
        this.shownotice=false;
      },
    }
  }
</script>

<style lang="scss">
  .goodimg {
    width: 100%;
    height: 300rpx;
  }

  .goodname {
    font-weight: bold;
  }

  .jfandbtn {
    display: flex;
    justify-content: space-around;
  }

  .jf {
    color: red;
    margin-top: 15rpx;
  }

  .btndh {
    background-color: #63a6c3;
    margin-top: 15rpx;
    padding-top: 5rpx;
    padding-bottom: 5rpx;
    width: 45%;
    border-radius: 5rpx;
    text-align: center;
    color: #FFFFFF;
  }
</style>
